<template>
  <div class="view-container workOvertimeList">
      <list-page @fetch-data="fetchData">
        <section slot="table">
          <el-table
            ref="table"
            :data="tableData"
            border
            stripe
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
          >
            <el-table-column type="selection" align="center"/>
            <el-table-column prop="qingJiaRenName" label="请假人" align="center" sortable/>
            <el-table-column prop="qjyy" label="请假原因" align="left" width="450" sortable>
              <template slot-scope="s">
                <el-link @click="showDetail(s.row.qingJiaId)">{{s.row.qjyy}}</el-link>
              </template>
            </el-table-column>
            <el-table-column sortable prop="qjtype" label="请假类型" align="center"/>
            <el-table-column sortable prop="qjstime" label="开始时间" align="center"/>
            <el-table-column sortable prop="qjetime" label="结束时间" align="center"/>
            <el-table-column sortable prop="stateName" label="状态" align="center">
              <template slot-scope="s">
                <el-tag :type="switchType(s.row.stateName)">{{s.row.stateName}}</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </section>
      </list-page>
  </div>
</template>

<script>
  import qingJiaAPI from '@/api/qingJia/qingJia'
  import ListPage from '../common/ListPage'
  export default {
    name: 'QingJiaTest',
    components:{ListPage},
    data() {
      return {}
    },
    created() {

    },
    methods: {
      fetchData(){

      },
      switchType(str){
        let type = ''
        switch (str) {
          case '审批中':
            type = 'default'
            break
          case '已完成':
            type = 'success'
            break
        }
        return type
      },
    }
  }
</script>

<style lang="scss">
  .workOvertimeList {
    .el-dialog {
      width: 500px;

      .el-dialog__footer {
        padding: 10px 45px;
      }
    }
  }
</style>
